<template>
  <el-icon :color="computedStatusColor" :size="props.iconSize">
    <CircleCheck  v-show="props.status === RecordStatus.SUCCESS" />
    <CircleClose v-show="props.status === RecordStatus.ERROR" />
  </el-icon>
</template>

<script setup lang="ts">
  import {computed,defineProps} from "vue";
  import {RecordStatus} from "@/ts/record";
  import {CircleCheck, CircleClose} from "@element-plus/icons";

  let  props=defineProps<{
    status:RecordStatus
    iconSize?:number
  }>();
  let computedStatusColor=computed(()=>{
    switch (props.status){
      case RecordStatus.VOID:return ''
      case RecordStatus.SUCCESS:return 'var(--success-color)'
      case RecordStatus.ERROR:return 'var(--error-color)'
    }
    return ''
  })
</script>

<style scoped lang="less">

</style>